<template>
	<view class="content">
		<u-navbar
		    :title="$t('authentication.title')"
		    :autoBack="true"
			titleWidth="600rpx"
			bgColor="#292929"
			leftIconColor="#FFFFFF"
			:titleStyle ="{color:'#FFFFFF',fontSize:'32rpx'}"
		 />
		<view class="title">
			<h2>{{$t('authentication.title')}}</h2>
			<text>{{$t('authentication.title1')}}</text>
		</view>
		<view class="main">
			<u--form labelPosition="top" :borderBottom="false" :labelStyle="{color:'#fff'}" labelWidth="auto" :model="userInfo" :rules="rules" ref="uForm">
				<!-- <u-form-item :label="$t('authentication.nationality')" prop="idType" ref="item1" class="choose-box">
					<u--input v-model="userInfo.idType" :readonly="true" border="none" :placeholder="$t('authentication.nationality')" class="formitem input-border"/>
					<view class="downbth input-border" @click="showSelect">
						<image src="../../static/downChoose.png" mode="widthFix" />
					</view>
					<view class="select-box"  v-show="selectShow">
						<view class="item-select" v-for="(item,index) in idTypelist" :key="index" @click="chooseId(item)">
					  	   <text class="select-text" :class="userInfo.idType==item?'checked':''">{{item}}</text>
						</view>
					</view>
				</u-form-item> -->
				<u-form-item :label="$t('authentication.realname')" prop="name" ref="item1">
					<u--input v-model="userInfo.name" border="none" :placeholder="$t('authentication.realname')" class="formitem input-border"/>
				</u-form-item>
				<u-form-item :label="$t('authentication.idcard')" prop="idCardNo" ref="item1">
					<u--input v-model="userInfo.idCardNo" border="none" :placeholder="$t('authentication.idcard')" class="formitem input-border"/>
				</u-form-item>
			</u--form>
			<button class="loginBth" @click="toReady">{{$t('authentication.sumbit')}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectShow:false,
				userInfo: {
					name: "",
					idCardNo:"",
					idType:""
				},
				idTypelist:['China ID Card','US ID card','British ID card','Australian ID card','Russian ID card']
			}
		},
		computed:{
			rules(){
				return {
					'name': {
						type: 'string',
						required: true,
						message: this.$t('err.realname'),
						trigger: ['blur', 'change']
					},
					'idCardNo': [{
						type: 'string',
						required: true,
						message: this.$t('err.idcard'),
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							if (!uni.$u.test.idCard(value)) {
								callback(new Error('*ID number is incorrect'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
                  showSelect(){
					  this.selectShow=!this.selectShow
				  },
				  toReady(){
					  this.$refs.uForm.validate().then(async (res)=>{
					  	 const {data:sue} = await this.$api('/front/realAuth','POST',this.userInfo)
					  	 console.log(sue)
						 if(sue.code!=200){
							 uni.navigateTo({
							 	url:"/pages/changeStatus/changeStatus?status=Modifiedfail&msg="+sue.msg
							 })
						 }else{
							 uni.navigateTo({
							 	url:"/pages/changeStatus/changeStatus?status=Modifiedsuccess"
							 })
						 }
						 
					  })
				  },
				  chooseId(item){
					  console.log(item)
					  this.userInfo.idType=item
					  this.selectShow=!this.selectShow
				  }
		},
		onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		    	this.$refs.uForm.setRules(this.rules)
		    },
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		min-height: 100vh;
		background: linear-gradient( 180deg, #000000 0%, #3C3C3C 100%);
		.title{
			color:#fff;
			padding: 55rpx;
			padding-top: 180rpx;
			box-sizing: border-box;
		}
		.main{
			width: 100vw;
			box-sizing: border-box;
			padding:0 95rpx;
			.choose-box{
				/deep/.u-form-item__body__right__content__slot{
					
					position: relative;
					.downbth{
						position: absolute;
						z-index: 999;
						width: 100rpx;
						height: 84rpx;
						right: 0;
						top: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 17rpx;
						image{
							width: 30rpx;
							height: 17rpx;
						}
					}
					.select-box{
						width: 100%;
						height: auto;
						overflow: hidden;
						position: absolute;
						border-right: 2rpx solid #B2A5E0;
						border-bottom: 2rpx solid #B2A5E0;
						border-left: 2rpx solid #B2A5E0;
						opacity: 1;
						background: #151515;
						top: 74rpx;
						z-index: 3;
						border-bottom-right-radius: 17rpx;
						border-bottom-left-radius: 17rpx;
						box-sizing: border-box;
						padding-top: 10rpx;
						padding-bottom: 10rpx;
						.item-select{
							color: #B2B2B2;
							width: 100%;
							text-align: left;
                            padding:0 30rpx;
							height: 60rpx;
							line-height: 60rpx;
							
							box-sizing: border-box;
							.select-text{
								display: inline-block;
								width: 100%;
								// border-bottom: 1rpx solid #B2B2B2;
								box-sizing: border-box;
							}
							.checked{
								color: #fff;
							}
						}
						.item-select:last-child{
							.select-text{
								border-bottom: none;
							}
						}
					}
				}
				
			}
			.formitem{
				box-sizing: border-box;
				height: 89rpx;
				border-radius: 17rpx;
				text-indent: 25rpx;
				color: #fff;
			}
			.loginBth{
				width: 100%;
				height: 89rpx;
				margin-top: 120rpx;
				border-radius: 17rpx;
				font-size: 25rpx;
				line-height: 89rpx;
				color: #fff;
				font-weight: bold;
				background-color: #926FBF;
			}
			.loginTips{
				color: #fff;
				font-size: 20rpx;
				width: 100%;
				text-align: center;
				margin-top: 20rpx;
			}
		}
	}
</style>